<template>
  <div class="all1">
    <router-link to="/register" class="deselect">取消 </router-link>
    <div class="header">
      <div class="login">登录</div>

      <div>
        <!-- 输入手机号，调起手机号键盘 -->
        <van-field
          v-model="tel"
          type="tel"
          label="+86"
          @click-input="onInTel"
          placeholder="请输入手机号/邮箱"
          @touchstart.native.stop="show = true"
          @blur="goAddressDtail()"
          maxlength="11"
          method="post"
        />
        <!-- 数字键盘 -->
        <van-number-keyboard
          :show="show"
          @blur="show = false"
          @input="onInput"
          @delete="onDelete"
        />

        <!-- 输入密码 -->
        <van-field
          v-model="password"
          type="password"
          label=""
          placeholder="“请输入密码”"
        />
      </div>
      <div class="btn">
        <van-button type="primary" width="600px" @click="handClick"
          >进入你今天真好看</van-button
        >
      </div>
      <div class="zhuce">
        <router-link to="/register">快速注册</router-link>
        <a href="#" class="wangji">忘记密码</a>
      </div>

      <!-- 第三方登录 -->
      <div class="third_party">
        <van-divider
          :style="{
            color: '#969799',
            borderColor: '#969799',
            padding: '0 16px',
          }"
        >
          第三方登录
        </van-divider>
      </div>
      <!-- 图标 -->
      <div class="thrid_wechat">
        <div class="wechat">
          <img
            width="100px"
            height="100px"
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.createhr.com%2Fuploads%2Fimg1%2F20170105%2F586e092c7b4be.jpg&refer=http%3A%2F%2Fwww.createhr.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634022993&t=76f78db0a153a7bdcbc14688f4255840"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Field, Button, Divider, NumberKeyboard, Toast } from "vant";
export default {
  data() {
    return {
      tel: "",
      password: "",
      show: true,
      loginbool: false,
    };
  },
  methods: {
    handClick() {
      if (this.password) {
        if (this.loginbool === true) {
          localStorage.setItem("username", "街哥");
          localStorage.setItem("followed", "7676565");
          localStorage.setItem("fans", "866786");
          this.$router.push("/");
        } else {
          Toast.fail("验证失败");
        }
      } else {
        Toast.fail("密码有误");
      }
    },
    goAddressDtail() {
      if (this.tel) {
        if (/^1[34578]\d{9}$/.test(this.tel)) {
          this.loginbool = true;
        } else {
          Toast.fail("手机号有误");
          this.loginbool = false;
        }
      } else {
        Toast.fail("号码为空");
        this.loginbool = false;
      }
    },

    onInTel(value) {
      console.log(value);
    },
    onInput(value) {
      // Toast(value);
      this.tel += value;
    },

    onDelete() {
      Toast("删除");

      // console.log();
      this.tel = this.tel.slice(0, -1);
    },
  },

  components: {
    VanField: Field,
    VanButton: Button,
    VanDivider: Divider,
    VanNumberKeyboard: NumberKeyboard,
  },
};
</script>

<style lang="less" scoped>
/* 取消 */
.deselect {
  color: green;
  font-weight: 600;
  font-size: 16px;
}
/* 页面 */
.all1 {
  width: 100%;
  padding: 15px;
  background-color: rgb(255, 255, 255);
}
/* 剩余部分 */
.header {
  padding: 20px;
}
/* 登录字体 */
.login {
  width: 100%;
  height: 80px;
  text-align: center;
  font-size: 30px;
  line-height: 50px;
}

form .van-field {
  margin-bottom: 10px;
  border: 1px solid #999;
  border-radius: 5px;
}
.btn {
  margin-bottom: 10px;
  margin-top: 20px;
  width: 100%;
}
.btn button {
  text-align: center;
  width: 100%;
  border-radius: 5px;
  background-color: darkturquoise;
  font-weight: 600;
  border: darkturquoise;
}
.btn a {
  color: white;
}
.zhuce {
  position: relative;
  font-size: 14px;
}
.wangji {
  position: absolute;
  right: 0px;
}
/* 第三方登录 */
.third_party {
  margin-top: 200px;
}
/* 图标 */
.wechat {
  border-radius: 50px;
  overflow: hidden;
  width: 100px;
  height: 100px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 0px;
  margin-left: -50px;
}
.thrid_wechat {
  width: 100%;
  position: relative;
}
</style>
